<div class="m-l nav navbar-nav m-t block" style="width:300px;">
  <span>群组管理 ></span>
  <span>群组列表 </span>
</div>
<div class="m-t-lg">
  <div class="wrapper-sm">
    <div class="panel panel-default">
      <div class="panel-body">
        <div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5">
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="群组编号/群组名称/群组地址" [(ngModel)]="keyWord">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button" (click)="search()">查询</button>
                </span>
              </div>
            </div>
            <div class="col-md-6" style="text-align: right">
              <button class="btn btn-info pull-right" (click)="btype=1; myModal.show()">
              新增
            </button>
            </div>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th>群组编号</th>
                <th>群组名称</th>
                <th>群组地址</th>
                <th>关联设备数量</th>
                <th>应用状态</th>
                <th>资费策略</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let groupdata of groupdata">
                <td><a [routerLink]="[ 'detail', groupdata.id]" style="color: blue;">{{groupdata.group_number}}</a></td>
                <td>{{groupdata.group_name}}</td>
                <td>{{groupdata.group_address}}</td>
                <td>{{groupdata.group_device_num}}</td>
                <td class="{{groupdata.group_status==0?'text-danger':'text-success'}}">{{groupdata.group_status==0?'未':'已'}}启用</td>
                <td>{{groupdata.policy_name}}</td>
                <td>
                  <button class="btn btn-xs btn-success" (click)="edit(groupdata)">编辑</button>
                  <button class="btn btn-xs btn-primary" (click)="showdevices(groupdata)">关联设备</button>
                  <button class="btn btn-xs {{groupdata.group_status==0?'btn-success':'btn-danger'}}" (click)="showstatus(groupdata)">{{groupdata.group_status==0?'启用':'禁用'}}</button>
                  <button class="btn btn-xs btn-info" (click)="showpolicy(groupdata)">资费策略</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <app-pagination [pageModel]="pageModel" (pageChanged)="getdata($event)"></app-pagination>
      </div>
    </div>
  </div>
</div>

<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" *ngIf="btype==1">新增</h4>
          <h4 class="modal-title" *ngIf="btype==2">编辑</h4>
          <h4 class="modal-title" *ngIf="btype==3">{{groupstat==0?'启用':'禁用'}}设备</h4>
          <h4 class="modal-title" *ngIf="btype==5">关联设备</h4>
          <h4 class="modal-title" *ngIf="btype==4">资费策略</h4>
          <!--  <button class="close" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button> -->
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div *ngIf="btype==1||btype==2">
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">群组名称</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" placeholder="请输入群组名称" name="group_name" [(ngModel)]='group_name_new' *ngIf="btype==1">
                  <input type="text" class="form-control" placeholder="请输入群组名称" name="group_name" [(ngModel)]='group_name_edit' *ngIf="btype==2">
                </div>

              </div>
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">群组地址</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" placeholder="请输入群组地址" name="group_addr" [(ngModel)]='group_address_new' *ngIf="btype==1">
                  <input type="text" class="form-control" placeholder="请输入群组地址" name="group_addr" [(ngModel)]='group_address_edit' *ngIf="btype==2">
                </div>
              </div>
            </div>
            <div *ngIf="btype==3">
              <div style="background-color: #e5e5e5;border:1px solid #e5e5e5;padding: 10px;font-size: 14px;border-radius: 5px;font-weight: bold;">
                你确定要 <span class="text-lg {{groupstat==0?'text-success':'text-danger'}}">{{groupstat==0?'启用':'禁用'}}</span>                群组 <span class="text-lg">{{groupname}}</span>   吗？
              </div>
            </div>
            <div *ngIf="btype==4">
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">资费名称</label>
                <div class="col-sm-7">
                  <select class="form-control" [(ngModel)]="policy_id">
                    <option value="">请选择</option>
                    <option *ngFor="let item of policyList" value="{{item.id}}">{{item.policy_name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <!--<div *ngIf="btype==5">
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">设备IDs</label>
                <div class="col-sm-7">
                  <input type="text" name="dsfs" class="form-control" [(ngModel)]="deviceIds" placeholder="请输入设备id，多个设备请以逗号隔开">
                </div>
              </div>
            </div>-->
            <div *ngIf="btype==5">
              <div class="form-group row">
                <label class="col-sm-3  control-label" style="text-align: right">设备模块编号列表:</label>
                <div class="col-sm-7 text-left">
                   <button class="btn btn-info confirm-btn" (click)="device_module_numbers.push({id:''})">添加设备</button>
                </div>
              </div>
              <div class="form-group row" *ngFor="let item of device_module_numbers;let i = index;">
                <label class="col-sm-3  control-label" style="text-align: right">设备{{i+1}}:</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" [(ngModel)]="item.id" placeholder="模块编号">
                </div>
                <div class="col-sm-2">
                  <button class="btn btn-danger confirm-btn" (click)="device_module_numbers.splice(i,1)">删除</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-info confirm-btn" *ngIf="btype==1" (click)="savedata()">保存</button>
          <button class="btn btn-success confirm-btn" *ngIf="btype==2" (click)="saveedit()">保存</button>
          <button class="btn {{groupstat==0?'btn-success':'btn-danger'}} confirm-btn" *ngIf="btype==3" (click)="groupstatus()">{{groupstat==0?'启用':'禁用'}}</button>
          <!-- <button class="btn btn-danger confirm-btn" *ngIf="btype==3" (click)="groupstatus(0)">确定</button> -->
          <button class="btn btn-info confirm-btn" *ngIf="btype==4" (click)="savepolicy()">确定</button>
          <button class="btn btn-primary confirm-btn" *ngIf="btype==5" (click)="savegroupdevices()">确定</button>
          <button class="btn  confirm-btn " (click)="cancel();">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>